<template>
    <div class="chart-box proportion">
        <div class="chart-title">
            <svg t="1626832920352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8907" width="200" height="200"><path d="M479.651244 129.21799C250.383584 129.21799 64.523549 315.075978 64.523549 544.347732c0 229.265614 185.860035 415.127695 415.127695 415.127695 229.27073 0 415.127695-185.862082 415.127695-415.127695L479.651244 544.347732 479.651244 129.21799zM544.345686 64.523549l0 415.129742 415.129742 0C959.475428 250.381537 773.616416 64.523549 544.345686 64.523549z" p-id="8908" fill="#409EFF"></path></svg>
            发放核销比
        </div>
        <div class="chart-content">
            <div :id="container" class="chart-views"></div>
        </div>
    </div>
</template>
<script>
import { deepAssign, formatterNumber } from '@/common/js/util.js'
import Highcharts from 'highcharts';
import Variablepie from 'highcharts/modules/variable-pie'
Variablepie(Highcharts); 

export default {
    props: {
        dataArr: {
            type: Object,
            default: {}
        },
        container: {
            type: String,
            default: 'ct4'
        }
    },
    data() {
        return {
            charts: null,
        }
    },
    methods: {
        chartInit(dataArr = null) {
            dataArr = deepAssign({}, dataArr);
            this.charts = Highcharts.chart(this.container, {
                chart: { 
                    type: 'variablepie',
                },
                credits: { enabled: false },  // 去版权水印
                exporting: { enabled: false }, // 隐藏导出
                tooltip: {
                    enabled: true,
                    borderRadius: 6, 
                    borderWidth: 0,
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    useHTML: true,
                    formatter: function() {
                        if(this.total >= 1) {
                            return `<small style="margin-bottom:5px;display:block">${this.key}: ${formatterNumber(this.y, 100000, 2, true)}张</small><span style="color:${this.color};font-size:14px">●</span>占比: ${(this.y * 100/this.total).toFixed(2)}%<br/>`
                        } else {
                            return `<small style="margin-bottom:5px;display:block">${this.key}: ${formatterNumber(this.y, 100000, 2, true)}张</small>`
                        }
                    },
                    padding: 12
                },
	            title: {
                    text: `<span class="highcharts-title-span">卡券核销比例: ${dataArr.verify_percentage}%</span>`,
                    align: 'right',
                    useHTML: true,
                    margin: 8,
                    verticalAlign: 'middle',
                    y: 65,
                    style: { 
                        "color": '#1BC530', 
                        "fontSize": "12px",
                        "fontWeight": 'bold',
                        "display": 'block',
                        "backgroundColor": Highcharts.color('#1BC530').setOpacity(0.1).get('rgba'),
                    }
                },
                legend: {
                    enabled: true,
                    itemDistance: 40,  // 图例项间距
                    verticalAlign: 'middle',
                    align: 'right',
                    squareSymbol: false,
                    symbolWidth: 20,
                    symbolRadius: 1,
                    symbolPadding: 7,
                    itemMarginBottom: 5,
                    width: 120,
                    y: -20
                },
                plotOptions: {
                    variablepie: {
			            borderColor: 'transparent',
                        cursor: 'pointer',
			            showInLegend: false,
			            allowPointSelect: true, // 允许选中
                        dataLabels: {
                            enabled: false
                        },
                        colors: [
                            '#FF5A5A', // 红色
                            '#4293F4', // 蓝色
                            '#F4B342', // 黄色
                            '#29E242'  // 绿色
                        ],
                        showInLegend: true,
                        slicedOffset: 4, // 点击展开的幅度
                        innerSize: '20%', // 粗细,
		                minSize: 120, // 最小尺寸
                        minPointSize: 10, // 设置落差尺度
                        zMin: 0,
                        //size: 180,
                    },
                },
                series: dataArr.series
            })
        }
    },
    watch: {
        'dataArr.series': function(val, oldVal) {
            this.chartInit(this.dataArr)
        }
    }
}
</script>
<style lang="scss" scoped>
    .container, .chart-views{
        width: 100%;
        height: 100%;
    }
    .chart-content {
        padding: 8px 10px 0;
        .chart-views {
            width: 100%;
            height: 101%;
        }
        /deep/.highcharts-title {
            border-radius: 4px;
            .highcharts-title-span {
                border: 1px solid #1BC530;
                padding: 3px 12px 2px;
                border-radius: 4px;
                display: block;
            }
        }
    }
</style>